<html>
<#include "../header.ftl">
<#include "./upload.ftl">

<body>
<div class="layui-fom-item">
    <div class="select">
        用户名：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="name" autocomplete="off">
        </div>
        <button class="select-on layui-btn layui-btn-sm" data-type="select">
            <i class="layui-icon"></i>查询
        </button>
        <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
                data-type="reload">
            <i class="layui-icon">ဂ</i>
        </button>
    </div>


</div>

<div class="layui-fom-item">
    <div class="layui-col-md12" style="height:40px;margin-top:3px;">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-normal" data-type="add">
                <i class="layui-icon">&#xe608;</i>新增
            </button>
            <button class="layui-btn layui-btn-normal" data-type="batchAdd">
                <i class="layui-icon">&#xe642;</i>批量导入
            </button>
        </div>
    </div>
</div>

<br>
<br>
<table class="layui-hide" id="user" lay-filter="user"></table>
<script type="text/html" id="userDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="del">删除</a>
</script>

<script type="text/html" id="sexTpl">
    {{#  if(d.roleId === 1){ }}
    <span style="color: #F581B1;">学生</span>
    {{#  } else if(d.roleId === 2){ }}
    <span style="color: blue;">班长</span>
    {{#  } else if(d.roleId === 4){ }}
    <span style="color: red;">班主任</span>
    {{#  } else { }}
    请联系管理员赋予角色
    {{#  } }}
</script>
<#--绑定用户名-跳转页面-->
<script type="text/html" id="usernameTpl">
    <a href="/?table-demo-id={{d.name}}" class="layui-table-link" target="_blank">{{ d.name }}</a>
</script>


<script>
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            ,
            laypage = layui.laypage //分页
            ,
            layer = layui.layer //弹层
            ,
            table = layui.table //表格
            ,
            carousel = layui.carousel //轮播
            ,
            upload = layui.upload //上传
            ,
            element = layui.element //元素操作
            ,

            $ = layui.jquery;


        //方法级渲染
        table.render({
            id: 'userList',
            elem: '#user'
            , url: 'showUserList'
            , toolbar: '#userDemo'
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cols: [[
                // {field: 'id', title: '序号',type:'numbers', width: '20%'}
                {type: 'checkbox', fixed: 'left'}
                , {field: 'name', title: '真实姓名', width: '20%', templet: '#usernameTpl'}
                , {field: 'roleId', title: '用户角色', width: '10%', templet: '#sexTpl'}
                , {field: 'password', title: '密码', width: '13%', style: 'background-color: #009688; color: #fff;'}
                , {
                    field: 'salt', title: '是否禁用', width: '13%'
                    , templet: function (d) {
                        return d.salt == '0' ? '<font style="color: red;">' + '禁用' + '</font>' : '不禁用'
                    }
                }
                , {field: 'right', title: '操作', width: '20%', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(user)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
            }
            ;
        });

        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                detail('编辑用户', 'showEditUser?id=' + data.id, 700, 450);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除用户[<label style="color: #00AA91;">' + data.name + '</label>]?', {}, function () {
                    toolDelByFlag(data.id, 'userList');
                });
            }
        });

        //指定允许上传的文件类型
        upload.render({
            elem: '#test3',
            url: 'upload',
            auto: false,
            //,multiple: true
            bindAction: '#test9',
            accept: 'file', //普通文件
            done: function (res) {
                console.log(res)
            }
        });


        var $ = layui.$, active = {
            select: function () {
                var name = $('#name');
                table.reload('userList', {
                    url: 'getUser'
                    , where: {
                        name: name.val()
                    }
                }, 'data');
            },
            reload: function () {
                var name = $('#name');
                table.reload('userList', {
                    page: {
                        curr: 1
                    },
                    where: {
                        name: name.val()
                    }
                }, 'data');
            },
            add: function () {
                add('添加用户', 'showAddUser', 700, 450);
            },
            batchAdd: function () {
                var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
                layer.open({
                    id: 'upload', //用于控制弹层唯一标识
                    type: 1,
                    icon: 5,
                    anim: 6,
                    closeBtn: 2, //关闭按钮
                    shade: [0.8, '#393D49'], //遮罩
                    area: ['500px', '300px'],
                    content: $('#helloTable') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }

        };

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    function rePwd(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "404.html";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-rePwd',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url,
        });
    }

    function detail(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "error/404";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-detail',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url,
            // btn:['关闭']
        });
    }

    /**
     * 更新用户
     */
    function update(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = "404.html";
        }
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        layer.open({
            id: 'user-update',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url + '&detail=false'
        });
    }


    function switchRole(d) {

        switch (d) {
            case 4:
                return '班主任';
                break;
            case 1:
                return '学生';
                break;
            case 2:
                return '班长';
                break;
            default:
                return '请联系管理员赋予角色';
        }

    }


    /*弹出层*/
    /*
     参数解释：
     title   标题
     url     请求的url
     id      需要操作的数据id
     w       弹出层宽度（缺省调默认值）
     h       弹出层高度（缺省调默认值）
     */
    function add(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "404.html";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-add',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url
        });
    }
</script>
</body>

</html>
